import React, { Component } from 'react';
import { Tabs} from 'antd-mobile';
import {withRouter} from 'react-router-dom';
import {  StyledTabList } from "./StyledCategory";
@withRouter
class Tablist extends Component {
  state={
    content:[],
    mytype:'',//专门判断分类和食材
    tab:''
  }
  static getDerivedStateFromProps(nextProps,preState){
    if(preState.mytype==nextProps.btn&& preState.content&&preState.content.length!=0){
      return null
    }else{
      return {
        tab:nextProps.btn,
        mytype:nextProps.btn,
        content:nextProps.obj[nextProps.btn],
      }
    }
  }
  handerTab=(tab)=>{
    this.setState({
      tab:tab,
      content:this.props.obj[tab]
    })
    }
    handerClick=(val)=>{
      // this.props.history.push({
      //   pathname:'/list',
      //   state:{
      //     title:val
      //   }
      // })
      this.props.history.push('./list/'+val)
    }
  render() {
    
const tabs=Object.keys(this.props.obj)
    return (
      <StyledTabList>
      <ul className='tabs'>{tabs&&tabs.map((item,index)=>{
        return <li onClick={()=>{this.handerTab(item)}} className={this.state.tab==item?'active':''} key={index}>{item}</li>
      })}</ul>
        <div className='list'>
            <ul className='right'>{this.state.content&&this.state.content.map((item,index)=>{
                return <li key={index} onClick={()=>this.handerClick(item)}>{item}</li>
              })}
            </ul>
        </div>
      </StyledTabList>
    );
  }
}

export default Tablist;
